<template>
    <!-- <span>
        <el-input
            :class="align"
            v-if="show"
            :disabled="dis"
            v-model="fake"
            autocomplete="off"
            :placeholder="placeholder"
            @change="change($event)"
            @focus="focus($event)"
            :size="size"
        ></el-input>
        {{ fake }}
    </span> -->
    <el-input
        :class="align"
        v-if="show"
        :disabled="dis"
        v-model="fake"
        autocomplete="off"
        :placeholder="placeholder"
        @change="change($event)"
        @focus="focus($event)"
        :size="size"
    ></el-input>
</template>

<script type="text/ecmascript-6">
export default {
    data: function () {
        return {
            fake: ''
        }
    },
    // 金额输入框格式化组件，输入输出值以分作为单位，显示值以元作为单位
    props: {
        show: {
            type: Boolean,
            default: true
        },
        word: {
            type: [String, Number]
        },
        dis: {
            type: Boolean,
            default: false
        },
        max: {
            type: Number,
            default: 999999999
        },
        min: {
            type: Number,
            default: 0
        },
        size: {
            type: String,
            default: 'small'
        },
        precision: {
            type: Number,
            default: 2
        },
        placeholder: {
            type: String,
            default: '请输入金额'
        },
        align: {
            type: String,
            default: 'left'
        },
        row: {
            type: Object,
            default: null
        },
        fieldName: {
            type: String,
            default: ''
        },
        rowIndex: {
            type: Number,
            default: 0
        }
    },
    created () { },
    mounted () {
        this.fake = ''
        this.setFake()
    },
    watch: {
        show () {
            this.fake = ''
            this.setFake()
        },
        word: {
            handler (newName, oldName) {
                console.log('obj.a changed')
                this.setFake()
            },
            immediate: true,
            deep: true
        }
    },
    computed: {
    },
    methods: {
        setFake () {
            if (this.word === '') {
                this.fake = ''
                return
            }
            if (this.word === null || this.word === undefined) {
                return
            }
            if (this.word === 0) {
                this.fake = '0.00'
                return
            }
            console.log('666')
            this.$forceUpdate()
            this.fake = (parseFloat(this.word) / 100).toFixed(this.precision) + ''
        },
        focus (event) {
            event.currentTarget.select()
        },
        change (event) {
            let val = Number(this.fake * 100).toFixed(this.precision)
            if (this.fake === '') {
                this.$emit('update:word', 0)
                this.$emit('changeNum', parseInt(val * 100), this.rowIndex)
                return
            }
            if (isNaN(parseInt(val))) {
                this.fake = '0.00'
                this.$emit('update:word', 0)
                return
            }
            let money = 0
            console.log(event, 'event')
            if (parseInt(event) * 100 < this.min) {
                money = Number(this.min / 100).toFixed(this.precision) + ''
                val = this.min
            } else if (parseInt(event) * 100 >= this.max) {
                val = this.max
                money = Number(this.max / 100).toFixed(this.precision) + ''
                this.$alert('最大金额限制为9999999.99', '提示', {
                    confirmButtonText: '确定'
                })
            } else {
                val = parseInt(event * 100)
                money = Number(event).toFixed(this.precision) + ''
            }
            setTimeout(() => {
                this.fake = money
            }, 10)
            this.$emit('update:word', Number(val))
            this.$emit('changeNum', Number(val), this.rowIndex)
            this.$emit('goodChange', event)
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
/deep/.center .el-input__inner
    text-align: center !important
</style>
